<template>
  <!-- 编辑收货地址表单 -->
  <el-dialog class="addLocationBtn addLocationStyle" :close-on-click-modal="false" :title="handletitle" :visible="editorBtn" width="640px" @close="dialogBtn">
    <span>
      <div>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <div class="formWrap">
            <div class="formItem">
              <el-form-item label="姓名" prop="realname">
                <el-input v-model="ruleForm.realname" placeholder="请输入姓名" />
              </el-form-item>
            </div>
            <div class="formItem marginLeft30">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="请输入手机号" />
              </el-form-item>
            </div>
          </div>
          <el-form-item label="地区" prop="area_id">
            <areaSelect v-if="editorBtn" v-model="ruleForm.area_id" :show="editorBtn" class="area" :placeholder="'请选择地区'" />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address" type="textarea" placeholder="请输入地址" />
          </el-form-item>
          <el-form-item label="座机电话" prop="tel">
            <el-input v-model="ruleForm.tel" type="text" placeholder="座机电话" />
          </el-form-item>
          <div class="formWrap">
            <div class="formItem">
              <el-form-item label="邮编">
                <el-input v-model="ruleForm.post_code" maxlength="6" placeholder="请输入邮编" />
              </el-form-item>
            </div>
          </div>

          <div v-if="type !== 99" class="formWrap">
            <div class="formItem">
              <div class="default">设为默认</div>
              <el-switch v-model="ruleForm.isdefault" :active-value="1" :inactive-value="2" />
            </div>
          </div>
          <!-- 错误提示 -->
          <div v-if="errorMsg" class="formWrap">
            <div class="formItem">
              <div class="default" />
              <div class="errormsg">{{ errorMsg }}</div>
            </div>
          </div>
        </el-form>
      </div>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button type="info" @click="dialogBtn">取消</el-button>
      <el-button v-if="type === 99" type="primary" @click="submitSave()">提交</el-button>
      <el-button v-else type="primary" @click="addressSave()">保存</el-button>
    </span>
  </el-dialog>
</template>
<style lang="less" scoped>
.box {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08);
  padding: 27px 50px;
  .addressWrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 12px;
    .item {
      width: calc((100% - 40px) / 2);
      width: 450px;
      margin-right: 40px;
      height: 250px;
      margin-bottom: 40px;
      .detail {
        display: flex;
        justify-content: space-between;
        height: 50px;
        padding: 0px 26px 0px 32px;
        border-bottom: 1px solid rgba(204, 204, 204, 1);
        .place {
          font-size: 14px;
          font-weight: 400;
          display: flex;
          align-items: center;
          color: rgba(102, 102, 102, 1);
          .address {
            width: 16px;
            height: 18px;
            margin-right: 10px;
          }
        }
        .normalPlace {
          display: flex;
          align-items: center;
          /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            border-radius: 100%;
          }
          /deep/ .el-checkbox__inner {
            border-radius: 100%;
          }
        }
      }
      .detailCont {
        height: 164px;
        padding: 0px 32px;
        .detailItem {
          display: flex;
          align-items: center;
          margin-top: 15px;
          .detailTitle {
            text-align-last: justify;
            text-align: justify;
            word-break: break-all;
            text-justify: inter-ideograph;
            display: inline-block;
            vertical-align: top;
            font-size: 12px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            min-width: 60px;
          }
          .string {
            font-size: 12px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
          .cont {
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: rgba(51, 51, 51, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .delWrap {
        position: absolute;
        display: flex;
        justify-content: flex-end;
        height: 36px;
        bottom: 0;
        width: 100%;
        right: 0;
        left: 0;
        .each {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 400;
          color: rgba(20, 146, 230, 1);
          margin-right: 30px;
          .seticon {
            width: 13px;
            height: 13px;
            margin-top: 3px;
            margin-right: 8px;
          }
          /deep/ .el-button .el-button--text {
            display: flex;
            align-items: center;
          }
        }
      }
      .gray {
        background: rgba(247, 247, 247, 1);
      }
      .addCont {
        text-align: center;
        .addimg {
          width: 60px;
          height: 60px;
          margin: auto;
          display: block;
        }
        .addLocation {
          font-size: 12px;
          font-weight: 400;
          color: rgba(204, 204, 204, 1);
          margin-top: 12px;
        }
      }
    }
    .add {
      position: relative;
      //background-image: url('~@/assets/img/addressimg/planblue.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .item:nth-child(2n) {
      margin-right: 0px;
    }
    .normal {
      border: 1px solid rgba(204, 204, 204, 1);
      border-radius: 2px;
      position: relative;
    }
    .addStyle {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.addLocationBtn {
  /deep/.el-dialog__title {
    font-size: 16px;
  }
  /deep/ .el-dialog__header {
    background-color: #f5f5f5;
  }
  /deep/ .el-dialog__footer {
    background-color: #f5f5f5;
    justify-content: center;
    display: flex;
    padding: 15px 0px;
  }
  /deep/ .el-textarea__inner {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #313030;
  }
  /deep/ .el-input-group__prepend {
    background-color: #ffffff;
    width: 100px;
    padding: 0px;
    text-align: center;
    color: #333333;
  }
  /deep/ .el-dialog__body {
    padding: 40px 30px;
  }
  /deep/ .el-button--primary {
    font-size: 14px;
    width: 180px;
  }
  /deep/ .el-icon-check:before {
    content: ' ';
  }
  /deep/ .el-step__icon.is-text {
    border-radius: 50%;
    border: unset;
    border-color: inherit;
    width: 9px;
    height: 9px;
    background-color: #2e7bff;
  }
  /deep/ .el-step__head.is-success {
    color: #2e7bff;
    border-color: #2e7bff;
  }
  /deep/ .el-step__title.is-success {
    color: #2e7bff;
  }
  /deep/ .el-step__title {
    font-size: 12px;
  }
  /deep/ .el-step__title.is-process {
    font-weight: normal;
    color: #666666;
  }
  /deep/ .dialog-footer {
    display: flex;
  }
  /deep/ .el-select {
    width: 100%;
  }
  /deep/ .el-form-item__content {
    margin-left: 70px !important;
  }
  /deep/ .el-form-item__label {
    width: 70px !important;
  }
  /deep/ .el-input-group--prepend .el-input__inner,
  .el-input-group__append {
    height: 50px;
  }
  /deep/ textarea::-webkit-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #c0c4cc !important;
    font-family: Microsoft YaHei !important;
  }
  /deep/ textarea::-moz-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #c0c4cc !important;
    font-family: Microsoft YaHei !important;
  }
  /deep/ textarea::-ms-input-placeholder {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #c0c4cc !important;
    font-family: Microsoft YaHei !important;
  }
  .formWrap {
    display: flex;
    width: 100%;
    .formItem {
      width: 50%;
      display: flex;
      .errormsg {
        color: red;
        margin-top: 15px;
      }
    }
    .default {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      width: 70px;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
  }
  .area {
    /deep/.el-cascader {
      width: 100%;
    }
  }
  .marginTop30 {
    margin-top: 30px;
  }
  .marginTop40 {
    margin-top: 40px;
  }
  .title {
    text-align: center;
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 27px;
  }
  .slide {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    border: 1px solid rgba(204, 204, 204, 1);
  }
  .rebox {
    position: relative;
    display: flex;
    .codeBtn {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 0px;
      top: 30px;
      width: 133px;
      height: 50px;
      background: rgba(46, 123, 255, 1);
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
  /deep/ .el-button--primary {
    width: 180px;
    height: 50px;
    background: rgba(46, 123, 255, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /deep/ .el-button--info {
    width: 180px;
    height: 50px;
    background: rgba(204, 204, 204, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: unset;
  }
  .contain {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 65px;
    margin-bottom: 20px;
    .select {
      width: 54px;
      height: 54px;
    }
    .letter {
      margin-left: 25px;
      font-size: 24px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .scantext {
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    text-align: center;
    margin-top: 20px;
  }
}
.addLocationStyle {
  /deep/ input::-webkit-input-placeholder {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(102, 102, 102, 1) !important;
  }
  /deep/ input::-moz-input-placeholder {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(102, 102, 102, 1) !important;
  }
  /deep/ input::-ms-input-placeholder {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(102, 102, 102, 1) !important;
  }
  /deep/ textarea::-webkit-input-placeholder {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(102, 102, 102, 1) !important;
    font-family: Microsoft YaHei !important;
  }
  /deep/ textarea::-moz-input-placeholder {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(102, 102, 102, 1) !important;
    font-family: Microsoft YaHei !important;
  }
  /deep/ textarea::-ms-input-placeholder {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(102, 102, 102, 1) !important;
    font-family: Microsoft YaHei !important;
  }
}
</style>
<script>
import { add } from '@/api/address'
import { notifySuccess } from '@/utils/message'
import areaSelect from '@/components/Address/areaSelect'
export default {
  components: {
    areaSelect
  },
  props: {
    // 弹框显示
    editorBtn: { type: Boolean, default: false },
    addresId: { type: [Number, String], default: 0 },
    ruleForm: {
      type: Object,
      // 编辑的表单数据
      default() {
        return {
          enterprise_id: 100009,
          id: '',
          tel: '',
          area_id: [null, null, null], // 选择地区
          realname: '', // 姓名
          mobile: '', // 手机号
          address: '', // 地址
          isdefault: 1, // 是否默认地址 1是2否
          post_code: '', // 邮编
          province_id: null,
          city_id: null
        }
      }
    },
    // 99 自定义保存; 1系统地址保存; 2,
    type: {
      type: Number,
      default: 0
    },
    // 弹框标题
    handletitle: {
      default: '地址管理',
      type: String
    }
  },
  data() {
    return {
      errorMsg: '',
      rules: {
        realname: [{ required: true, message: '请输入姓名！', trigger: 'blur' }],
        mobile: [
          {
            required: true,
            pattern: '', // 可以写正则表达式呦呦呦
            message: '手机号格式错误',
            trigger: 'blur'
          }
        ],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        area_id: [{ required: true, message: '请选择地区', trigger: 'change' }]
      }
    }
  },
  created() {
  },
  methods: {
    // 添加 编辑 提交
    async addressSave() {
      const that = this
      let hasVali = true
      this.$refs.ruleForm.validate((valid, err) => {
        if (!valid) {
          that.errorMsg = ''
          hasVali = false
          return false
        }
        // 添加
        if (this.subType === 'add') {
          this.addAcount()
        }
        // 编辑
        if (this.subType === 'edit') {
          this.editAccount()
        }
      })
      if (!hasVali) {
        return false
      }
      if (this.ruleForm.area_id === '') {
        that.errorMsg = '请选择地区'
      }
      const areatype = typeof this.ruleForm.area_id
      if (areatype === 'object' || areatype === 'array') {
        const len = parseInt(this.ruleForm.area_id.length)
        this.ruleForm.area_id = this.ruleForm.area_id[len - 1]
      }
      try {
        add(this.ruleForm.enterprise_id,
          this.ruleForm.realname,
          this.ruleForm.mobile,
          this.ruleForm.area_id,
          this.ruleForm.address,
          this.ruleForm.isdefault,
          this.ruleForm.post_code,
          this.ruleForm.tel).then(res => {
          if (this.type === 1) {
          // 刷新父页面数据
            this.$parent.getList()
          }
          if (this.type === 2) {
          // 将结果传递回去
            this.$emit('update:addres_id', res.data)
          // this.$emit('addressBack', res)
          }
          notifySuccess('提交成功')
          this.$emit('dialogVisibleEvent', false)
        })
      } catch (error) {
        if (error.code !== 1) {
          that.errorMsg = error.msg || '提交错误，请重试'
        }
      }
    },
    // 弹框
    dialogBtn(e) {
      this.$emit('dialogVisibleEvent', false)
    },
    // 自定义提交
    submitSave() {
      const taht = this
      if (this.ruleForm.area_id === '') {
        taht.errorMsg = '请选择地区'
      }
      const areatype = typeof this.ruleForm.area_id
      if (areatype === 'object' || areatype === 'array') {
        const len = parseInt(this.ruleForm.area_id.length)
        this.ruleForm.area_id = this.ruleForm.area_id[len - 1]
      }
      this.$emit('submitAction', this.ruleForm)
    }
  }
}
</script>
